<template>
	<el-form size="small" :model="formData" :rules="formRules" ref="form" label-width="80px" class="custom_config_item">
		<div class="delete">
			<slot name="delete"></slot>
		</div>
		<el-row :gutter="16">
			<el-col :span="24">
				<el-form-item prop="title" label="配置标题">
					<el-input v-model="formData.title" placeholder="输入配置标题"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="14">
				<el-form-item prop="field" label="配置字段">
					<el-input v-model="formData.field" placeholder="输入配置字段"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="10">
				<el-form-item prop="type" label="配置类型">
					<el-select v-model="formData.type" placeholder="选择配置类型">
						<el-option label="单选" value="1"></el-option>
						<el-option label="多选" value="2"></el-option>
						<el-option label="滑块" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="options" label="配置选项">
					<sw-table-form ref="option" v-model="formData.options"></sw-table-form>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="content" label="配置描述" :rules="formRules.content">
					<el-input type="textarea" v-model="formData.content" placeholder="输入配置描述"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			formData: {},
			formRules: {
				title: { required: true, message: '请输入配置标题', trigger: 'blur' },
				type: { required: true, message: '请选择配置类型', trigger: 'change' },
				field: { required: true, message: '请输入配置字段', trigger: 'blur' },
				options: { required: true, message: '请填写配置选项', trigger: 'change' }
			}
		};
	},
	watch: {
		data: {
			handler(data) {
				this.formData = data;
			},
			immediate: true
		}
	},
	methods: {
		handleValidateForm() {
			return new Promise((resolve) => {
				this.$refs['form'].validate(async (valid) => {
					let childValid = await this.$refs['option'].validChildForm();
					resolve(valid && childValid);
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.custom_config_item::v-deep {
	position: relative;
	padding: 16px 16px 0;
	border-bottom: solid 1px #e4e7ed;
	.delete {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9;
		display: none;
		.el-button {
			padding: 5px;
			border-radius: 0;
		}
	}
	&:hover .delete {
		display: block;
	}
}
</style>
